@import "../common.scss";

body{
	background-color: #F7F7F7;
}

.user{
	display: flex;
	align-items: flex-start;
	padding: ws(45) ws(30) ws(30) ws(30);
	box-shadow: 0 ws(3/2) ws(10) 0 rgba(1, 1, 1, 0.1);
	background-color: transparent;
	position: relative;
	background-color: #fff;
	.user-br{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: #fff;
		opacity: .1;
		z-index: -1;
		> img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.user-image{
		width: ws(131/2);
		height: ws(131/2);
		border-radius: ws(131/2);
		margin-right: ws(20);
		overflow: hidden;
		> img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.user-desc{
		flex: 1;
		.user-name{
			color: #414141;
			font-size: ws(25);
			padding-top: ws(15);
			padding-bottom: ws(15);
			margin-bottom: ws(15);
			@include border-line(#bfbfbf,bottom)
		}
		.user-text{
			font-size: ws(10);
			color: $main-color;
		}
		.user-account{
			display: flex;
			align-items: center;
			margin-top: ws(5);
			justify-content: space-between;
			.user-num{
				font-size: ws(25);
				color: $main-color;
			}
			.mui-icon{
				color: $main-color;
				font-size: ws(20);
			}
		}
	}
}

.user-house{
	margin-top: ws(25);
	display: flex;
	padding: 0 ws(30);
	justify-content: space-around;
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.item-image{
			width: ws(30);
			height: ws(30);
			margin-bottom: ws(10);
			> img {
				width: 100%;
				height: 100%;
			}
		}
		.item-text{
			font-size: ws(14);
			color: $main-color;
		}
	}
}


.user-list{
	margin: ws(30);
	background-color: #fff;
	box-shadow: 0 ws(3/2) ws(10) 0 rgba(1, 1, 1, 0.1);
	border-radius: ws(14/2);
	.item{
		height: ws(60);
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 ws(54/2);
		@include border-line(#dcdcdc,bottom);
		&:last-child{
			@include border-line(#fff,bottom);
		}
		.item-desc{
			display: flex;
			align-items: center;
			color: #818181;
			font-size: ws(14);
			> img {
				width: ws(30/2);
				height: ws(30/2);
				margin-right: ws(10);
			}
		}
		.mui-icon{
			font-size: ws(20);
			color: #bababa;
			margin-right: ws(-5);
		}
	}
}